<template>
  <div class="cart_body">
    <!-- 头部标题 -->
    <section class="header">
      <van-icon name="arrow-left"></van-icon>
      <span>购物车</span>
      <van-icon name='search'></van-icon>
    </section>
    <!-- 点击跳转登录 -->
    <section v-show='isGrow' class='cart_logo' @click='startLogin'>
      <span>登录后享受更多优惠</span>
      <div class='logo_right'>
        <span>去登录</span>
        <van-icon name='arrow'></van-icon>
      </div>
    </section>
    <!-- 购物车为空时，显示 单击跳转主页面 -->
    <section v-if='isCar' class='cart_noitems'>
      <router-link to="/">
        <span>购物车还是空的</span>
        <em>去逛逛</em>
      </router-link>
    </section>

    <!-- 商品推荐 -->
    <section class='rec_box'>
      <div class="rec-img">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png" >
      </div>
      <div class="rec-list">
        <CarItem v-for='goods in arr' :key='goods.id' :goods='goods' />
      </div>
    </section>
    <Tabbar/>
  </div>
</template>
<script>
import instance from "../../api/request";
import CarItem from '../components/CarItem.vue'
import Tabbar from "../components/Tabbar.vue"
export default {
  name: "",
  data() {
    return {
      isCar: true,
      arr: [],
      isGrow: localStorage.getItem("Token") ? false : true
    };
  },
  methods: {
    async fn() {
      let { data } = await instance.get("/index.json");
      this.arr = data.cart.products;
      // console.log(data.cart.products);
    },
    startLogin() {
      this.$router.push({path: '/login'})
    }
  },

  components: {CarItem, Tabbar},
  beforeMount() {
    this.fn();
  },
};
</script>
<style lang="less" scoped>
.cart_body {
  width: 100vw;
  margin: 0.5rem auto 0;
  color: #3c3c3c;
  
  .header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 7.2rem;
    height: 0.5rem;
    display: flex;
    box-sizing: border-box;
    padding: 0 0.2rem;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(242, 242, 242);
    span { color: rgb(102, 102, 102); font-size: 0.3rem; }
    .van-icon {font-size: 0.47rem; color: #999;}
  }
  .cart_logo {
    width: 7.2rem;
    margin: 0 auto;
    box-sizing: border-box;
    color: #3c3c3c;
    display: flex;
    padding: 0 0.2rem;
    height: 1.04rem;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    >span {
      color: rgba(0, 0, 0, 0.87);
      font-size: 0.32rem;
    }
    .logo_right {
      display: flex;
      align-items: center;
      height: 1.04rem;
      span, .van-icon {
        color: rgba(0, 0, 0, 0.54);
        font-size: 0.24rem;
      }
      .van-icon { margin-left: 0.02rem; font-size: 0.32rem; }
    }
  }
  .cart_noitems {
    width: 7.2rem;
    margin: 0 auto;
    background: #ebebeb;
    padding: 0 0.2rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.2rem;
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.8rem;
      font-size: 0.24rem;
      span {
        line-height: 0.8rem;
        background: url(https://m.mi.com/static/img/cartnull.daaf7926f8.png) no-repeat 0;
        background-size: auto 100%;
        padding: 0 .16rem 0 .96rem;
        color: rgba(0, 0, 0, 0.27);
      }
      em {
        border: 1px solid rgba(0,0,0,.15);
        box-sizing: border-box;
        height: .5rem;
        line-height: .5rem;
        color: rgba(0,0,0,.87);
        padding: 0 .24rem;
        font-style: normal;
      }
    }
  }
  .rec_box {
    background: #fff;
    width: 7.2rem;
    margin: 0 auto;
    padding-bottom: 50px;
    .rec-img {
      width: 100%;
      height: 1.2rem;
      img { width: 100%; height: 100%; }
    }
    .rec-list {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      
    }
  }
}
</style>